import React, { Component } from "react";
import './TodoFooter.css';
export default class TodoFooter extends Component {
    render() {
        //获取所有的任务信息
        let {todos} = this.props;
        //是否全部都完成
        let isAllComp = todos.every(item => item.done);
        //计算总数
        let total = todos.length;
        //计算完成任务的总数
        let comTotal = todos.filter(item => item.done).length;

        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={isAllComp && todos.length > 0}  onChange={this.checkAll} />
                </label>
                <span>
                    <span>已完成 {comTotal}</span> / 全部 {total}
                </span>
                <button className="btn btn-danger" onClick={this.removeComTodos}>清除已完成任务</button>
            </div>
        );
    }

    //全完成 全不完成
    checkAll = (e) => {
        //调用父级传入的 checkAllTodo
        this.props.checkAllTodo(e.target.checked);
    }

    //清除已完成的任务
    removeComTodos = () => {
        this.props.removeComTodos();
    }
}
